Skip to content

Redesign customer story cards, detail template & stories section#5018

Open
nenadmalic wants to merge 6 commits into
mainfrom
5013-redesign-customer-story-card-and-update-stories-section
Open

Redesign customer story cards, detail template & stories section#5018
nenadmalic wants to merge 6 commits into
mainfrom
5013-redesign-customer-story-card-and-update-stories-section

Conversation

@nenadmalic

Copy link
Copy Markdown
Contributor

What

Redesign of the customer stories section: category/listing page, story cards, featured carousel, and the story detail template.

Note

Draft / preview only — not for merge yet. Opened to share a Cloudflare Workers preview with the team. Nothing goes live until/unless this is merged to `main`.

Changes

  • New components: `FeaturedCarousel.vue`, `KpiRotator.vue`; reworked `Card.vue`, `Sidebar.vue`, `StoriesList.vue`, `StoryGallery.astro`
  • Redesigned story detail template (KPIs, pull-quote, MDC body)
  • Per-story logo icons (`icon.svg`) added and story content updated
  • Fix: story bodies were rendering blank — logoIcon was passed to the client island as a raw image() object, which Astro can't serialize, breaking hydration. Now flattened to .src in the detail route.
  • Industry badges + sidebar-logo styling tuned for light/dark and image backgrounds

Preview

🔗 https://ks-5013-redesign-customer-story-c-docs.kestra-io.workers.dev (available once the Publish to Cloudflare Workers check finishes)

@github-actions

github-actions Bot commented Jun 23, 2026

Copy link
Copy Markdown
Contributor

☁️ Cloudflare Worker Preview Deployed!

🔗 https://ks-5013-redesign-customer-story-c-docs.kestra-io.workers.dev
🔗 https://c7af7218-docs.kestra-io.workers.dev

## 🔦 Lighthouse Benchmark

Tested: https://ks-5013-redesign-customer-story-c-docs.kestra-io.workers.dev on 2026-06-24 23:02 UTC
No baseline available — scores will appear after the first merge to main

Scores (0–100, higher is better)

Page Performance Accessibility Best Practices SEO
Home 86 84 54 92
Pricing 98 92 54 100
Enterprise 98 83 54 100
Cloud 91 88 54 100
About Us 86 91 54 100
Docs Landing 99 88 54 92
Contribute to Kestra (simple docs) 99 88 54 92
Flow (full featured docs) 96 90 54 92
Blog Index 75 91 54 100
Blog Post (sample) 95 88 54 100
VS Page (sample) 97 88 54 100
Plugins Landing 94 81 54 92
Plugin Page (sample) 93 88 54 100
Plugin Debug Page (sample) 96 88 54 100
Plugin Debug Return Page (sample) 96 88 54 100
Blueprints Landing 92 80 54 92
Blueprint Audit Logs CSV Export 67 87 54 100

Core Web Vitals (lower is better)

Page LCP FCP TBT CLS Speed Index
Home 1.29 s 0.59 s 235 ms 0.005 1.73 s
Pricing 1.09 s 0.55 s 19 ms 0.000 0.88 s
Enterprise 1.16 s 0.57 s 7 ms 0.003 0.80 s
Cloud 1.94 s 0.54 s 13 ms 0.000 0.98 s
About Us 2.58 s 0.58 s 9 ms 0.000 0.77 s
Docs Landing 0.86 s 0.57 s 47 ms 0.000 0.97 s
Contribute to Kestra (simple docs) 0.97 s 0.57 s 42 ms 0.002 0.78 s
Flow (full featured docs) 1.28 s 0.59 s 77 ms 0.000 1.14 s
Blog Index 10.37 s 0.50 s 43 ms 0.001 1.09 s
Blog Post (sample) 1.53 s 0.51 s 9 ms 0.000 0.74 s
VS Page (sample) 1.15 s 0.59 s 17 ms 0.064 0.70 s
Plugins Landing 1.03 s 0.54 s 21 ms 0.000 2.23 s
Plugin Page (sample) 1.49 s 0.60 s 59 ms 0.051 1.66 s
Plugin Debug Page (sample) 0.91 s 0.56 s 116 ms 0.001 1.40 s
Plugin Debug Return Page (sample) 1.12 s 0.58 s 52 ms 0.025 1.69 s
Blueprints Landing 1.52 s 0.81 s 31 ms 0.000 1.79 s
Blueprint Audit Logs CSV Export 1.05 s 0.59 s 220 ms 0.485 1.92 s
Legend

🟢 improved  ·  🔻 regressed  ·  (blank) no significant change
Score threshold: ±10 pts  ·  Metric threshold: ±30% of baseline

- New Card, FeaturedCarousel, Sidebar and KpiRotator components
- Redesigned story detail template (KPIs, pull-quote, MDC body)
- Add per-story logo icons (icon.svg) and update story content
- Fix story bodies rendering blank: flatten logoIcon to .src in the
  detail route so the StoryDetail island can hydrate
- Industry badges + sidebar-logo styling tuned for light/dark and
  image backgrounds
…uration

- Story icons: Foundation, Riverside, Apple, Displayce; fix Dataport icon
  (missing 'o'); EU flag for Government IT Provider; pharmacy cross for
  Pharmacy Retailer; Víssimo uses full logo
- Sidebar/card/carousel prefer logoIcon; sidebar-logo black background
- KPI labels to sentence case; +10px row height; OT/IT <abbr>; v-html value
- Split industry/industry2; two card chips; dropdown collects both
- Curated featured carousel order (10 stories); clamp carousel nav at end
- Industry badge + fix hydration: flatten logoIcon to .src in detail route
- FeaturedCarousel: on mobile, move prev/next arrows to the bottom row
  flanking the dots; add side margin to the mobile card
- Software Provider industry → Cloud Provider
- Region 'North America' → 'Americas' across 6 stories
@nenadmalic nenadmalic force-pushed the 5013-redesign-customer-story-card-and-update-stories-section branch from 8f951a1 to a005d90 Compare June 24, 2026 17:32
- Hero h1: color the closing period pink (#f62e76)
- Card: wrap use-case/KPIs/footer in .card-bottom anchored with margin-top:auto
  so they stay bottom-aligned regardless of .card-short-desc height
  (fixes 3-column card breakage between 768-1100px)
@nenadmalic

Copy link
Copy Markdown
Contributor Author

@MilosPaunovic, @Pradumnasaraf or @iitzIrFan, I've made significant improvements to our customer stories pillar page based on stakeholder feedback.

Could you please review it? If you need any additional information or context, feel free to reach out to me on Slack.

Old /use-cases/stories listing 301-redirects to /customers (handled in
redirects/use-cases.yml), so update the nav link to the canonical URL.

@Pradumnasaraf Pradumnasaraf left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Currently, the only issue I can see with this section is not mobile responsive

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Redesign customer story card and update stories section

2 participants